<template>
    <div>
        <van-nav-bar title="视频" left-text="返回" left-arrow @click-left="$router.back()" />
        <video width="750" height="540" controls :src="getbroadcast.video"></video>
        <main>
            <div>
                <van-tabs v-model:active="active">
                    <van-tab title="直播介绍">
                        <div class="jieshao">
                            <div v-for="(item, index) in getbroadcasts" :key="index">
                                <h2>{{ item.title }}</h2>
                                <img :src="item.img" alt="" style="width: 750px;">
                            </div>
                        </div>
                    </van-tab>
                    <van-tab title="互动评论">
                        <div class="pinglun">
                            <textarea v-model="newComment.content" placeholder="请输入评论内容"></textarea>
                            <button @click="submitComment" >提交评论</button>
                            <ul>
                                <li v-for="(comment, index) in comments" :key="index">
                                    <p>{{ comment.content }}</p>
                                    <p>发布时间：{{ comment.timestamp }}</p>
                                </li>
                            </ul>

                        </div>
                    </van-tab>
                </van-tabs>
            </div>
        </main>

    </div>
</template>
<script lang="ts" setup>
// import route from '@/router';
import "./index.css"
import { ref } from 'vue'
import http from '@/utils/http';
import { useRoute } from 'vue-router';


const active = ref(0);

const route = useRoute()
const getbroadcast = ref({})
const getbroadcasts = ref([])
console.log(route.query.id)


const comments = ref([]);
const newComment = ref({
    content: '',
    timestamp: ''
});

const submitComment = () => {
    if (newComment.value.content.trim() !== '') {
        newComment.value.timestamp = new Date().toISOString();
        comments.value.push({ ...newComment.value });
        newComment.value.content = '';
    }
};


const getLive = async (id: any) => {
    await http.get(`/api/live?id=${id}`)
        .then(res => {
            console.log(res.data);
            getbroadcast.value = res.data.data
            getbroadcasts.value = res.data
            console.log(getbroadcast.value);

        })
}
getLive(route.query.id)


</script>
<style scoped>
textarea {
    width: 530px;
    height: 50px;
    padding: 10px;
    margin: 5px;
    position: absolute;
    top: 485px;
}

button {
    padding: 0 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
}
</style>